<template>
  <a-table :columns="columns" :data-source="dataSource" bordered size="middle">
    <template #bodyCell="{ column, text, record }">
      <template v-if="column.dataIndex === 'operation'">
        <!-- <div class="editable-row-operations">
          <span v-if="editableData[record.key]">
            <a-typography-link @click="save(record.key)">Save</a-typography-link>
            <a-popconfirm title="Sure to cancel?" @confirm="cancel(record.key)">
              <a>Cancel</a>
            </a-popconfirm>
          </span>
          <span v-else>
            <a @click="edit(record.key)">Edit</a>
          </span>
        </div> -->
        <span>
          <i
            class="details"
            type="primary"
            @click="onView(column, text, record)"
            >回复</i
          >
        </span>
      </template>
      <template v-else-if="column.dataIndex === 'image'">
        <a-image
          :width="30"
          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
        />
        {{ record.address }}
      </template>
    </template>
  </a-table>
</template>
<script setup>
import { cloneDeep } from "lodash-es";
import { reactive, ref } from "vue";
const columns = [
  {
    title: "name",
    dataIndex: "name",
    resizable: true,
    width: "100",
  },
  {
    title: "age",
    dataIndex: "age",
    width: "15%",
  },
  {
    title: "address",
    dataIndex: "image",
    width: "40%",
  },
  {
    title: "operation",
    dataIndex: "operation",
  },
];
const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    key: i.toString(),
    name: `Edrward ${i}`,
    age: 32,
    address: `London Park no. ${i}`,
  });
}
const dataSource = ref(data);
const editableData = reactive({});
const edit = (key) => {
  editableData[key] = cloneDeep(
    dataSource.value.filter((item) => key === item.key)[0]
  );
};
const save = (key) => {
  Object.assign(
    dataSource.value.filter((item) => key === item.key)[0],
    editableData[key]
  );
  delete editableData[key];
};
const cancel = (key) => {
  delete editableData[key];
};

//操作
const onView = (column, text, record) => {
  console.log("record: ", record);
  console.log("text: ", text);
  console.log("column: ", column);
};
</script>
<style scoped>
@import url("./index.less");
.editable-row-operations a {
  margin-right: 8px;
}
</style>
